<template>
  <div class="strut-div">
    <div class="party-build-lt">
      <div class="pblt-l">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="card-item" style="height: 440px;">
              <p class="card-title">支部人数分布</p>
              <div class="card-div">
                <common-pieNew-chart ref="branchMemNum" :config="branchMemNumConfig"></common-pieNew-chart>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card-item" style="height: 440px;">
              <p class="card-title">党员职业分布</p>
              <div class="card-div">
                <common-pieNew-chart ref="occupation" :config="occupationConfig"></common-pieNew-chart>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card-item" style="height: 440px; margin-top: 20px;">
              <p class="card-title">基层党组织分布</p>
              <div class="card-div">
                <common-bar-chart ref="orgDistribution" :config="orgDistributionConfig"></common-bar-chart>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card-item" style="height: 440px; margin-top: 20px;">
              <p class="card-title">全省党员学历结构</p>
              <div class="card-div">
                <common-pieNew-chart ref="memEdu" :config="memEduConfig"></common-pieNew-chart>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="pblt-r">
        <div class="card-item" style="height: 550px;">
          <p class="card-title">党员入党时间分布</p>
          <div class="card-div">
            <common-pieNew-chart ref="joinTime" :config="joinTimeConfig"></common-pieNew-chart>
          </div>
        </div>
        <div class="card-item" style="height: 330px; margin-top: 20px;">
          <p class="card-title">党员性别分布</p>
          <div class="card-div">
            <party-build-sex-chart></party-build-sex-chart>
          </div>
        </div>
      </div>
    </div>
    <div class="party-build-lb">
      <div class="card-item" style="width:1870px; height: 440px;">
        <p class="card-title">党组织指标体系</p>
        <div class="card-div">
          <party-build-org-setup></party-build-org-setup>
        </div>
      </div>
    </div>

    <div class="party-build-r">
      <div class="card-item" style="height: 440px;">
        <p class="card-title">党员年龄分布</p>
        <div class="card-div">
          <common-bar-chart ref="memAge" :config="memAgeConfig"></common-bar-chart>
        </div>
      </div>
      <div class="card-item" style="height: 440px; margin-top: 20px;">
        <p class="card-title">党员党龄分布</p>
        <div class="card-div">
          <party-build-party-standing></party-build-party-standing>
        </div>
      </div>
      <div class="card-item" style="height: 440px; margin-top: 20px;">
        <p class="card-title">低保党员身份</p>
        <div class="card-div">
          <common-pieNew-chart ref="subsistenceAllowance" :config="subsistenceAllowanceConfig"></common-pieNew-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import ageData from '../../../../static/ht-party-age.json';
import eduData from '../../../../static/ht-party-edu.json';
import occupationData from '../../../../static/ht-party-occupation.json';
import joinData from '../../../../static/ht-party-join.json';
import orgDistribution from '../../../../static/ht-party-org-distribution.json';

var _deptId = window.localStorage.getItem("mapId");
//处理age
var agexAxis = [];
var ageSeries = [];
// ageData.map(item => {
//   agexAxis.push(item[0]);
//   ageSeries.push(item[1]);
// })

//处理edu
var eduLegend = [];
var eduSeries = [];
// eduData.map(item => {
//   eduLegend.push(item[0]);
//   eduSeries.push({
//     value:item[1],
//     name:item[0],
//   })
// })

//处理occ
var occLegend = [];
var occSeries = []
// occupationData.map((item) => {
//   occLegend.push(item.name);
//   occSeries.push({
//     value:item.num,
//     name:item.name,
//   })
// })

//处理入党时间
var joinLegend = [];
var joinSeries = [];

// joinLegend.map(item => {
//   joinSeries.push({
//     value:joinData[item],
//     name:item,
//   })
// })

//处理org-distribution

var orgxAxis = [];
var orgSeries = [];
// orgxAxis.map(item => {
//   orgSeries.push(orgDistribution[item]);
// })


import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
import PartyBuildSexChart from '@/views/party-building/party-building-left/party-build-sex-chart.vue';
import CommonBarChart from '@/components/common/common-bar-chart.vue';
import PartyBuildPartyStanding from '@/views/party-building/party-building-left/party-build-party-standing.vue';
import PartyBuildOrgSetup from '@/views/party-building/party-building-left/party-build-org-setup.vue'


export default {
  components: {
    CommonPieNewChart,
    PartyBuildSexChart,
    CommonBarChart,
    PartyBuildPartyStanding,
    PartyBuildOrgSetup
  },
  data() {
    return {
      branchMemNumConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'branchMemNumPie',
          title: '',
          color: ['#A530FD', '#ED5450', '#325DF9','#D78155','#DAB54C','#7259F8', '#FDD100'],
          legend: {
            show: true,
            left: '70%',
            top: '24%',
            orient: 'horizontal',
            textStyle: {
              color: '#3FECFF',
              fontSize: 19
            },
            data: ['3人以下支部', '3-20人支部', '20-40人支部', '40-60人支部','60-100人支部','100-200人支部','200人以上支部']
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/>{c}个 {d}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
               roseType: 'area',
              radius: ['15%', '60%'],
              center: ['35%', '53%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}个 {d}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: [{ value: 102, name: '3人以下支部' }, { value: 186, name: '3-20人支部' }, { value: 268, name: '20-40人支部' }, { value: 216, name: '40-60人支部' }, {value:106,name:'60-100人支部'}, {value:98,name:'100-200人支部'},{value:72,name:'200人以上支部'}]
            }
          ]
        }
      },
      occupationConfig:{
        option: {
          id: 'occupationPie',
          title: '',
          color: ['#A530FD', '#ED5450', '#325DF9','#D78155','#DAB54C','#7259F8', '#FDD100'],
          legend: {
            show: false,
            left: '75%',
            top: '24%',
            orient: 'horizontal',
            textStyle: {
              color: '#3FECFF',
              fontSize: 19
            },
            data: occLegend
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/>{c}人 {d}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
               roseType: 'area',
              radius: ['15%', '70%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}人 {d}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: occSeries
            }
          ]
        }
      },
      orgDistributionConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'orgDistributionBar',
          yName: '(个)',
          xAxis: orgxAxis,
          y: [
            {
              axis: {
                min: 0,
                max: 500,
                name: '(个)'
              },
              title: '',
              data: orgSeries,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#0DC5E6' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#2A7BC8' // 100% 处的颜色
                  }
                ]
              },
              stack: '1'
            }
          ]
        }
      },
      memEduConfig:{
        option: {
          id: 'memEduPie',
          title: '',
          color: ['#A530FD', '#ED5450', '#325DF9','#D78155','#DAB54C','#7259F8', '#FDD100'],
          legend: {
            show: true,
            left: '20%',
            top: '80%',
            width: '60%',
            orient: 'horizontal',
            textStyle: {
              color: '#3FECFF',
              fontSize: 19
            },
            data: eduLegend
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/>{c}个 {d}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['20%', '50%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}个 {d}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: eduSeries
            }
          ]
        }
      },
      joinTimeConfig:{
        option: {
          id: 'joinTimePie',
          title: '',
          color: ['#A530FD', '#ED5450', '#325DF9','#D78155','#DAB54C','#7259F8', '#FDD100'],
          legend: {
            show: true,
            left: '15%',
            top: '80%',
            width: '70%',
            orient: 'horizontal',
            textStyle: {
              color: '#3FECFF',
              fontSize: 19
            },
            data: joinLegend
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/>{c}个 {d}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['20%', '50%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}个 {d}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: joinSeries
            }
          ]
        }
      },
      memAgeConfig:{
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'touristAgeBar',
          yName: '(人)',
          xAxis: agexAxis,
          y: [
            {
              axis: {
                min: 0,
                max: 8000,
                name: '(人)'
              },
              title: '',
              data: ageSeries,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#FFFD9E' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FFC600' // 100% 处的颜色
                  }
                ]
              },
              stack: '1'
            }
          ]
        }
      },
      subsistenceAllowanceConfig:{
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'subsistenceAllowancePie',
          title: '',
          color: ['#A530FD', '#ED5450', '#325DF9','#D78155','#DAB54C','#7259F8', '#FDD100'],
          legend: {
            show: true,
            left: '14%',
            top: '85%',
            orient: 'horizontal',
            textStyle: {
              color: '#3FECFF',
              fontSize: 19
            },
            data: ['贫农', '离退休', '在校学生', '失业','其他']
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} {b}<br/>{c}个 {d}%'
          },
          series: [
            {
              name: '',
              type: 'pie',
              roseType: 'area',
              radius: ['0%', '60%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}个 {d}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: [{ value: 87, name: '在校学生' }, { value: 146, name: '离退休' }, { value: 268, name: '贫农' }, { value: 216, name: '失业' }, {value:106,name:'其他'}]
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.$refs.branchMemNum.initChart();
    this.$refs.subsistenceAllowance.initChart();

    this.getAgeSeries();
    this.getOccupationData();
    this.getJoinParty();
    this.getEducation();
    this.getBasicDistribution();
  },
  methods:{
    getAgeSeries() {
      this.$get(this.$api.getAgeChart,{
        deptId:localStorage.getItem("mapId"),
        year:2019
      }).then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            agexAxis.push(item[0]);
            ageSeries.push(item[1]);
          })
          
          this.$refs.memAge.initChart();
        }
      })
    },
    getOccupationData() {
      this.$get(this.$api.getOccupation,{
        deptId:localStorage.getItem("mapId")
      }).then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            occLegend.push(item.name);
            occSeries.push({
              value:item.num,
              name:item.name,
            })
          })

          this.$refs.occupation.initChart();
        }
      })
    },
    getJoinParty() {
      this.$get(this.$api.getJoinPartyTime,{
        deptId: window.localStorage.getItem("mapId")
      }).then(res => {
        if (res.code === 200) {
          Object.keys(res.data).map(item => {
            joinLegend.push(item)
            joinSeries.push({
              value:res.data[item],
              name:item,
            })
          })

          this.$refs.joinTime.initChart();
        }
      })
    },
    getEducation() {
      this.$get(this.$api.getEducation,{
        deptId: _deptId
      }).then(res => {
        if(res.code === 200) {
          res.data.map(item => {
            eduLegend.push(item[0]);
            eduSeries.push({
              value:item[1],
              name:item[0],
            })
          })

          this.$refs.memEdu.initChart();

        }
      })
    },
    getBasicDistribution() {
      this.$get(this.$api.getBasicDistribution, {
        deptId: _deptId
      }).then(res => {
        if (res.code === 200) {
          Object.keys(res.data).map(item => {
            orgxAxis.push(item);
            orgSeries.push(res.data[item]);
          })

          this.$refs.orgDistribution.initChart();
        }
      })
    }
  }
}

</script>

<style scoped lang="scss" type="text/scss">
  .party-build-lt {
  width: 1870px;
  height: 900px;
  float: left;

  > .pblt-l {
    height: 100%;
    float: left;
    width: 1240px;
  }
  > .pblt-r {
    height: 100%;
    float: left;
    width: 610px;
    margin-left: 20px;
  }
}

.party-build-r {
  width: 610px;
  height: 1360px;
  float: left;
  margin-left: 20px;
}

.party-build-lb {
  width: 1870px;
  height: 440px;
  position: absolute;
  bottom: 30px;
}
.card-item {
  width: 610px;
}
.card-div {
  height: calc(100% - 54px);
}
</style>
